<!--客户管理-->
<template>
  <div class="app-container">

    <!--查询-->
    <el-form ref="queryForm" size="small" :model="queryParams">
      <div class="switch" :class="{'active':queryParams.saleType==1?true:false}" @click="handleListing(1)">未添加
      </div>
      <div class="switch" :class="{'active':queryParams.saleType==3?true:false}" @click="handleListingsaleType(3)">已添加
      </div>
    </el-form>

    <!--按钮-->
    <div class="btn-group">
      <el-row type="flex" class="rows">
        <el-col class="cols" style="margin-right: 40px;">
          <el-date-picker v-model="queryParams.tradeDate" @change="changeTime" type="daterange"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"/>
        </el-col>

        <el-col class="cols">
          <el-select v-model="queryParams.dictCodeId" clearable placeholder="游戏品类：请选择游戏品类"
                     @change="getList(1)">
            <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode"/>
          </el-select>
        </el-col>

        <el-col class="cols">
          <el-input v-model="queryParams.account" placeholder="游戏账号：请输入游戏账号" clearable
                    @keyup.enter.native="getList(1)"/>
        </el-col>

        <el-col class="cols">
          <el-input v-model="queryParams.saleId" placeholder="销售编号：请输入销售编号" clearable
                    @keyup.enter.native="getList(1)"/>
        </el-col>

        <el-col class="cols">
          <el-input v-model="queryParams.changePhone" placeholder="手机号：请输入手机号" clearable
                    @keyup.enter.native="getList(1)"/>
        </el-col>
      </el-row>

      <el-button type="primary" size="mini" icon="el-icon-download" @click="handleExport">导出数据</el-button>
    </div>

    <!--表格-->
    <el-table v-loading="loading" :data="data" stripe>
      <el-table-column label="编号" align="center" width="60">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="销售日期" align="center" prop="tradeTime" min-width="100"/>
      <el-table-column label="游戏品类" align="center" prop="dictCode" min-width="100" :show-overflow-tooltip="true"/>
      <el-table-column label="账号描述" align="center" prop="accountDescription" min-width="200">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top" class="custom-popover">
            <p class="hover-multi-line">{{ $line(scope.row.accountDescription) }}</p>
            <div slot="reference" class="hover-slot-line">{{ scope.row.accountDescription }}</div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.accountDescription)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="游戏账号" align="center" prop="account" min-width="200" :show-overflow-tooltip="true"/>
      <el-table-column label="销售渠道" align="center" prop="saleChannel" min-width="120"/>
      <el-table-column label="销售编号" align="center" prop="saleId" min-width="160" :show-overflow-tooltip="true"/>
      <el-table-column label="销售金额" align="center" prop="saleAmount" min-width="120"/>
      <el-table-column label="销售客户" align="center" prop="userName" min-width="120"/>
      <el-table-column label="回收渠道" align="center" prop="recycleChannelName" min-width="120"/>
      <el-table-column label="回收编号" align="center" prop="orderNumber" min-width="120"/>
      <el-table-column label="回收日期" align="center" prop="storageTime" min-width="120"/>
      <el-table-column label="在库时间" align="center" prop="differenceOfDays" min-width="120"/>
      <el-table-column label="销售利润" align="center" prop="profit" min-width="120"/>
      <el-table-column label="销售利率" align="center" prop="profitRate" min-width="120"/>
      <el-table-column label="客户手机" align="center" prop="bindingPhone" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.changePhone ? scope.row.changePhone : scope.row.bindingPhone ? scope.row.bindingPhone : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成本金额" align="center" prop="recycleAmount" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.recycleAmount ? scope.row.recycleAmount : scope.row.suAmount ? scope.row.suAmount : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button slot="reference" size="mini" type="text" v-if="scope.row.saleType == 1"
                     @click="handleUpdate(scope.row)">
            <span style="color: rgba(83, 90, 244, 1);">未添加</span>
          </el-button>
          <el-button slot="reference" size="mini" type="text" v-if="scope.row.saleType == 3"
                     @click="handleReycle(scope.row)">
            <span style="color: rgba(83, 90, 244, 1);">回收入库</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList('')"/>

    <!--回收入库表单-->
    <recycle ref="recycle"></recycle>
  </div>
</template>

<script>
import {
  customList,
  updateStatus,
  recycleAndStorage
} from "@/api/business/customer";
import recycle from "../components/recycle.vue";

export default {
  components: {recycle},
  data() {
    return {
      recycleShow: false,
      gameList: [],//游戏品类
      loading: false,// 遮罩层
      total: 0, // 总条数
      data: [],// 表格数据
      // 查询参数
      queryParams: {
        saleType:1,
        pageNum: 1,
        pageSize: 10,
        tradeTime: '',//时间
        tradeTimeStart: '',//开始时间
        tradeTimeEnd: '',//结束时间
        status: 2,//未添2 以添7
        phoneNumber: '',//绑定手机号
        dictCodeId: '',//游戏品类id
        account: '',//游戏账号
        saleId: '',//销售编号
        changePhone: '',//手机号
      },
    };
  },
  created() {
    this.getList();

    //查询游戏列字典
    this.getDicts('game_category').then(res => {
      this.gameList = res.data
    })
  },
  methods: {
    handleCopy(e) {
      if (e) {
        const el = document.createElement('textarea');
        el.value = e;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        // 通知用户已复制
        this.$message({
          message: '复制成功！',
          type: 'success'
        });
      }
    },
    // 时间选择
    changeTime(e) {
      this.queryParams.tradeTimeStart = e[0];
      this.queryParams.tradeTimeend = e[1];
    },

    //切换上架状态
    handleListing(saleType) {
      this.queryParams.status = 2;
      this.queryParams.saleType = saleType;
      this.getList(1)
    },

    //切换上架状态
    handleListingsaleType(saleType) {
      this.queryParams.saleType = saleType;
      this.queryParams.status =2;
      this.getList(1)
    },

    // 已添加更新操作
    handleUpdate(row) {
      this.$confirm('确认添加该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus({id: row.id, status: 3}).then(res => {
          if (res.code == 200) {
            this.$message.success('已添加操作成功！');
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        })
      }).catch(() => {
        // 用户点击了取消，不执行删除操作
      });
    },

    // 回收入库
    handleReycle(row) {
      this.$refs.recycle.handleOpen(row, '回收入库');
    },

    /** 查询列表 */
    getList(num) {
      if (num) this.queryParams.pageNum = num;
      this.loading = true;
      customList(this.queryParams).then(res => {
        this.loading = false;
        this.data = res.rows;
        this.total = res.total;
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('/sales/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  background: #F3F5FF;
  padding: 30px;

  /*搜索*/
  ::v-deep.el-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 20px 10px 20px;
    background: #3A84FF;
    border-radius: 16px 16px 0 0;

    .switch {
      width: 110px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-family: Source Han Sans;
      font-weight: normal;
      user-select: none;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .active {
      border-radius: 8px;
      background: #FEFEFE;
      color: #2376FE;
    }
  }

  /*button*/
  .btn-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 20px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0 0 16px 16px;
    margin-bottom: 20px;

    .rows {
      width: 82%;
      flex-wrap: wrap;
    }

    .cols {
      width: 200px;
      margin: 0 10px 10px 0;

      ::v-deep .el-range-input {
        width: 80px;
        color: #0060FF;
        font-size: 12px;
      }

      ::v-deep .el-date-editor {
        width: 210px;
      }

      ::v-deep .el-input__inner {
        color: #0060FF;
        font-size: 12px;
      }
    }

    .el-button {
      height: 36px;
      background-color: #116BFF;
    }
  }

  /*列表*/
  ::v-deep.el-table {
    border-radius: 16px;

    th {
      height: 50px;
      background: #488DFE;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    td {
      height: 50px;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #3D3D3D;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    .el-table__body tr {
      &:nth-child(odd) {
        background-color: #FEFEFE;
      }

      &:nth-child(even) {
        background-color: #F8FAFE;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: #E4E8F5;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #3380FD;
      }
    }

    .status {
      display: block;
      width: 54px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      opacity: 0.8;
      border-radius: 4px;
      font-size: 12px;
      transition: opacity 0.3s ease-in-out;
    }
  }

  /*分页*/
  .pagination {
    background-color: transparent !important;

    ::v-deep.el-pagination {
      display: flex;
      align-items: center;

      .number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 8px;
      }

      .el-pager > .el-icon {
        height: 40px;
        width: 40px;
        background: #fff;
        line-height: 40px;
        border-radius: 8px;
      }
    }
  }
}
</style>
